<template>
  <div id="app">
      <!-- 面包屑导航栏 -->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- /面包屑导航栏 -->

    <!-- 卡片区域 添加 -->
    <el-card class="box-card">
        <div class="kapian">
            <el-form ref="form" :model="form" label-width="100px" align="center" inline>
                <el-form-item label="商户ID/名称:">
                    <el-input v-model="form.name" class="input-nei"></el-input>
                </el-form-item>
                <el-form-item label="订单号:" label-width="100px">
                    <el-input v-model="form.order" class="input-nei"></el-input>
                </el-form-item>
                <el-form-item label="配送方式:">
                  <el-select placeholder="全部" v-model="form.shuju" class="peisong">
                      <el-option label="全部" value="quanbu"></el-option>
                      <el-option label="到店自提" value="ddzt"></el-option>
                      <el-option label="同城配送" value="tcps"></el-option>
                      <el-option label="跨域配送" value="kyps"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="下单日期:" class="riqi" label-width="80px">
                    <el-col :span="10">
                    <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="1">至</el-col>
                    <el-col :span="10">
                    <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="手机号:" label-width="100px" >
                    <el-input v-model="form.phone" class="input-nei"></el-input>
                </el-form-item>
                <div class="button">
                  <el-button type="primary" class="anniu">立即创建</el-button>
                  <el-button class="anniu">取消</el-button>
                </div>
            </el-form>
        </div>
    </el-card>
    <!-- /卡片区域 -->

    <!-- 导航栏 -->
    <el-card>
                <el-table
                :data="orderlist"
                style="width: 100%">
                <el-table-column
                    prop="shop_id"
                    label="商户ID"
                    width="100px" align="center">
                </el-table-column>
                <el-table-column
                    prop="sh_shop.shop_name"
                    label="商户名称"
                    width="100px" align="center">
                </el-table-column>
                <el-table-column
                    prop="goods_order_id"
                    label="订单号"
                    width="100px" align="center">
                </el-table-column>
                <el-table-column
                    prop="address"
                    label="商品列表"
                    width="100px" align="center">
                    <template #default="{row}">
                      <el-button type="info" plain size="mini"
                      @click="$router.push({path:'/product-list',query:{id:row.shop_id}})">商品列表</el-button>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="order_time"
                    label="下单时间"
                    width="150" align="center">
                    <template #default="{row}">
                      {{row.order_time.substr(0,10)}}
                      {{row.order_time.substr(11,8)}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="order_money"
                    label="订单总金额"
                    width="100px" align="center">
                    <template #default="{row}">
                      {{row.order_money}}元
                    </template>
                </el-table-column>
                <el-table-column
                    prop="delivery_id"
                    label="配送方式"
                    width="125" align="center">
                    <template #default="{row}">
                        {{row.delivery_id==='1'?'到店自取':'外卖'}}
                    </template>
                </el-table-column>
                <el-table-column
                    label="收货地址/提货人"
                    width="250" align="center">
                    <template #default="{row}">
                      <div v-if="row.sh_user_receive_address!==null">
                        {{row.sh_user_receive_address.receive_user_address}}/
                        {{row.sh_user_receive_address.receive_user_name}} -
                        {{row.sh_user_receive_address.receive_user_phone}} 收
                      </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="order_state"
                    label="订单状态"
                    width="150" align="center">
                    <template #default="{row}">
                      <el-popover
                        placement="bottom"
                        width="400"
                        trigger="click">
                        <el-radio-group v-model="radio" @change="getRadio(row)">
                          <el-radio label="0">待支付</el-radio>
                          <el-radio label="1">待自提</el-radio>
                          <el-radio label="2">待配送</el-radio>
                          <el-radio label="3">待发货</el-radio>
                          <el-radio label="4">已收货</el-radio>
                          <el-radio label="5">已取消</el-radio>
                          <el-radio label="6">售后退款</el-radio>
                        </el-radio-group>
                        <el-button type="primary" plain size="mini"
                         slot="reference"
                        @click="stateOrder(row)">
                        {{status[state.indexOf(row.order_state)]}}
                        </el-button>
                      </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作" align="center">
                    <template #default="{row}">
                      <el-button type="primary" plain size="mini"
                      @click="userOrder(row)">详情</el-button>
                    </template>
                </el-table-column>
                </el-table>

      <!-- 分页区域 -->
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryshop.pageNum"
      :page-sizes="[2, 5, 10, 15]"
      :page-size="queryshop.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="count">
      </el-pagination>
    </el-card>
    <!-- /导航栏 -->

  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        name: '',
        order: '',
        phone: '',
        shuju: '',
        date1: '',
        date2: ''
      },
      // 滑块初始值
      value2: '',
      count: 0,
      // 查询参数对象
      queryshop: {
        query: '',
        pageNum: 1,
        pageSize: 2
      },
      // 列表
      orderlist: [],
      status: [
        '待支付',
        '待自提',
        '待配送',
        '待发货',
        '已收货',
        '已取消',
        '售后退款'
      ],
      state: [
        'unpaid',
        'untake',
        'undelivery',
        'unsend',
        'take',
        'refund',
        'cancel'
      ],
      radio: ''

    }
  },
  created () {
    this.getOrderList()
  },
  mounted () {

  },
  methods: {
    // 获取订单列表
    async getOrderList () {
      const { data: res } = await this.$http.get('all-goods-order', { params: this.queryshop })
      console.log(res)
      if (res.meta.status !== 200) return this.$message.error('获取店铺列表失败')
      this.orderlist = res.data.rows
      this.count = res.data.count
    },
    // 监听 pagesize 改变的事件
    handleSizeChange (newSize) {
    //   console.log(newSize)
      this.queryshop.pageSize = newSize
      this.getOrderList()
    },
    // 监听 页码值 改变的事件
    handleCurrentChange (newPage) {
    //   console.log(newPage)
      this.queryshop.pageNum = newPage
      this.getOrderList()
    },
    // 订单详情
    async userOrder (row) {
      const { data: res } = await this.$http.get(`/goods-order/detail/${row.goods_order_id}`)
      console.log(res)
    },
    stateOrder (row) {
      this.radio = String(this.state.indexOf(row.order_state))
    },
    // radio选择框改变
    async getRadio (row) {
      // console.log(this.state[this.radio - 0])
      const { data: res } = await this.$http.put(`/goods-order/state/${row.goods_order_id}/${this.state[this.radio - 0]}`)
      console.log(res)
      if (res.meta.status !== 200) return this.$message.error('修改状态失败')
      this.$message.success('修改状态成功')
      this.getOrderList()
    }
  }
}
</script>

<style scoped lang="less">
.box-card{
    margin-top: 20px;
    margin-bottom: 20px;
}

.kapian{
    width: 1200px;
}
/deep/.el-select{
    width: 400px;
    margin-right: 20px;
}
.input-nei{
    width: 400px;
}

.riqi{
    width: 600px;
}
.button{
  text-align: center;
}
.anniu{
    width: 100px;
}

</style>
